<template>
  <div>
    <el-form ref="ruleFormRef" :model="param" :rules="rules" inline label-width="60px" style="margin-top: 10px;"
      label-position="left">
      <el-form-item prop="planPickupDate" style="width:100%">
        <div style="width: 15%;text-align: right;">
          <template v-if="props.type == 'hd'"> <!--回调单-->
            <redStar /> 预计回调日期
          </template>
          <template v-if="props.type == 'tx'"> <!-- 提箱单-->
            <redStar /> 预计提箱日期
          </template>  
        </div>
        <el-date-picker v-model="param.planPickupDate" :clearable="false" :editable="false" type="date"
          style="width:20%;margin-left:30%" />
      </el-form-item>
      <el-form-item style="width:100%">
        <div style="width: 15%;text-align: right;">
          <redStar />
          支付方式
        </div>
        <el-select v-model="param.paymentMethod" style="width:20%;margin-left:30%" placeholder="选择">
          <el-option label="对公转账" value="5" />
          <el-option label="在线支付" value="10" />
        </el-select>
      </el-form-item>
      <el-form-item prop="period" style="width:100%">
        <div style="width: 15%;text-align: right;">
          结算账期
        </div>
        <el-input v-model="param.period" :min="1" :max="999" style="width:20%;margin-left:30%" @change="handleInput" ></el-input>&nbsp;&nbsp;天
      </el-form-item>
      <el-form-item v-if="showInvoiceType">
        <div>
          <redStar />
          发票类型
        </div>
        <el-select v-model="param.invoiceType" style="width:100%" placeholder="选择">
          <el-option label="增值税普通发票" value="5" />
          <el-option label="形式发票" value="15" />
          <el-option label="其它" value="20" />
        </el-select>
      </el-form-item>
      <el-form-item prop="contacts" style="width:100%">
        <div style="width: 15%;text-align: right;">
          <redStar />
          联系人
        </div>
        <el-input v-model="param.contacts" style="width:20%;margin-left:30%" disabled></el-input>
      </el-form-item>
      <el-form-item prop="tel" style="width:100%">
        <div style="width: 15%;text-align: right;">
          <redStar />
          联系电话
        </div>
        <areaTel v-model:firstValue="param.tel" :disabled="true" v-model:secondValue="param.areaCode" style="width:20%;margin-left:30%">
        </areaTel>
      </el-form-item><br>
      <el-form-item style="width:100%">
        <div style="width: 15%;text-align: right;">留言</div>
        <el-input v-model="param.leaveMsg" type="textarea" maxlength="500" show-word-limit
          style="width:20%;margin-left:30%"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import areaTel from '@/views/components/areaTel'
import { onActivated, onDeactivated, onMounted, reactive, ref } from 'vue';
import redStar from '@/views/components/redStar.vue';
import { FormInstance } from 'element-plus';
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const user = userStore.getUser() //user信息
const ruleFormRef = ref()

onDeactivated(() => {
  resetForm(ruleFormRef.value)
})

const props = defineProps({
  showInvoiceType: {
    type: Boolean,
    default: true
  },
  type:{
    type: String,
    default: 'hd'  
  }
})

const param = ref({
  invoiceType: '5', // old 15,2024.10.28 update to 5 ,beconse rent invoiceType havent 15-形式发票
  planPickupDate: new Date(new Date().setHours(0, 0, 0, 0)),
  paymentMethod: '5',
  orderId: '',
  name: "",
  contacts: user.nickname,
  areaCode: user.areaCode,
  tel: user.mobile, //param.tel 
  userInfo: user,
  leaveMsg: '',
  period:''
});


const validatePlanPickupDate = (rule: any, value: any, callback: any) => {
  const planPickupDate = new Date(value)
  if (planPickupDate < new Date(new Date().setHours(0, 0, 0, 0))) {
    callback(new Error('预计时间须 大于等于今天'))
  } else {
    callback()
  }
}
const isTel = (rule: any, value: any, callback: any) => {
  var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
  if (!myreg.test(value)) {
    callback(new Error('联系电话 格式错误'))
  } else {
    callback()
  }
}
const rules = reactive({
  planPickupDate: [
    { required: true, message: '必填项', trigger: 'blur' },
    { required: true, validator: validatePlanPickupDate, trigger: 'blur' },
  ],
  contacts: [
    { required: true, message: '必填项', trigger: 'blur' },
    { required: true, max: 10, message: '最大不超过10位', trigger: 'blur' }
  ],
  tel: [
    { required: true, message: '必填项', trigger: 'blur' },
    { required: true, validator: isTel, message: '联系电话 格式错误', trigger: 'blur' }
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  let resut = false
  await formEl.validate((valid, fields) => {
    if (valid) {
      resut = true
    } else {
      resut = false
    }
  })
  return resut
}
const onSubmit = async () => {
  return await submitForm(ruleFormRef.value)
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

defineExpose({
  formData: param.value,
  onSubmit: onSubmit,
})

const handleInput = (val:any) => {
  // 如果输入的值不是整数，则取整
  if (!Number.isInteger(Number(val))) {
    val = Math.floor(val);
  }
  // 如果输入的值小于 1，则设置为 1
  if (val < 1) {
    val = 1;
  }
  param.value.period = val;
};
</script>